<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item><router-link to="/home">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item><router-link to="/device">设备场所管理</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>设备场所信息</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <input type="hidden" v-model="formState.id" name="id"/>
        <a-form-item ref="name" label="设备名称" name="name">
          <a-input v-model:value="formState.name" name="name" maxlength="100"/>
        </a-form-item>
        <a-form-item ref="code" label="设备编号" name="code" style="display: none;">
          <a-input v-model:value="formState.code" name="code"/>
        </a-form-item>
        <a-form-item ref="teamName" label="所属班组" name="teamName">
          <a-input v-model:value="formState.teamName" readonly @click="openTeamModal" allow-clear>
            <template #addonAfter>
              <team-modal @onSelectedTeam="onSelectedTeam" ref="teamModal"></team-modal>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item ref="workspace" label="工作场所" name="workspace">
          <a-input v-model:value="formState.workspace" name="workspace" maxlength="200"/>
        </a-form-item>
        <a-form-item ref="safetyMeasures" label="电气安全措施" name="safetyMeasures">
          <a-textarea :rows="4" v-model:value="formState.safetyMeasures" name="safetyMeasures" show-count :maxlength="240"/>
        </a-form-item>
        <a-form-item ref="remark" label="备注" name="remark">
          <a-textarea :rows="4" v-model:value="formState.remark" name="remark" show-count :maxlength="200"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="goback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { defineComponent, reactive, ref, toRaw, UnwrapRef, watch } from 'vue'
import { DeviceModel } from './js/device-model'
import { ResultModel } from '@/common/result.model'
import { message } from 'ant-design-vue'
import { DeviceApi } from '@/views/device/js/device-api'
import { TeamModel } from '@/views/team/js/team-model'
import TeamModal from '../biz-common/team-modal.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    TeamModal
  },
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      rules: {
        name: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 25,
            message: '名称应为3-25个文字',
            trigger: 'blur'
          }
        ],
        teamName: [
          {
            required: true,
            message: '请选择所属小组',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    const id:string = this.$route.params.id as string
    if (id) {
      DeviceApi.get(id).then(response => {
        const team = response.data
        Object.assign(this.formState, team)
      })
    }
  },
  methods: {
    goback () {
      this.$router.push('/device/device')
    },
    openTeamModal () {
      console.log('openTeamModal()')
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      this.$refs.teamModal && this.$refs.teamModal.showTeamModal()
    },
    onSelectedTeam (team: TeamModel) {
      console.log(team)
      this.formState.teamName = team.name
      this.formState.teamId = team.id
    }
  },
  setup () {
    const $router = useRouter()
    const formRef = ref()
    const formState: UnwrapRef<DeviceModel> = reactive({
      name: ''
    })
    const value = ref<string>()
    watch(value, () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      console.log(value.value)
    })
    const onSubmit = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value
        .validate()
        .then(() => {
          DeviceApi.save(formState).then(response => {
            if (ResultModel.isSuccess(response)) {
              message.success('保存成功！')
              $router.push('/device/device/form/success?id=' + response.data.id)
            }
          })
        })
        .catch((error: ValidateErrorEntity<DeviceModel>) => {
          console.log('error', error)
        })
    }
    const resetForm = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value.resetFields()
    }
    return {
      formState,
      formRef,
      value,
      onSubmit,
      resetForm
    }
  }
})
</script>

<style scoped lang="less">

</style>
